<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetic Field Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #ffffff;
        }
        canvas {
            border: 1px solid #eeeeee;
        }
    </style>
</head>
<body>
    <canvas id="physics-diagram" width="500" height="350"></canvas>
    <script>
        const canvas = document.getElementById('physics-diagram');
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Define geometry parameters
        const cx = 130; // center x of the ellipse
        const cy = 150; // center y of the ellipse
        const rX = 35;  // horizontal radius of the ellipse (perspective)
        const rY = 70;  // vertical radius of the ellipse
        const length = 280; // length of the cylinder segment
        const endX = cx + length;

        // --- Draw the Cylinder ---

        // Fill the main body of the cylinder
        ctx.fillStyle = '#D3D3D3'; // Solid medium gray
        ctx.fillRect(cx, cy - rY, length, 2 * rY);

        // Draw the left circular face (ellipse in perspective)
        ctx.fillStyle = '#EAEAEA'; // Lighter gray for the face
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.ellipse(cx, cy, rX, rY, 0, 0, 2 * Math.PI);
        ctx.fill();
        ctx.stroke();

        // Draw the cylinder outlines
        ctx.beginPath();
        ctx.moveTo(cx, cy - rY);
        ctx.lineTo(endX, cy - rY);
        ctx.moveTo(cx, cy + rY);
        ctx.lineTo(endX, cy + rY);
        ctx.stroke();

        // Draw the wavy "broken" end to indicate a long wire
        ctx.beginPath();
        ctx.moveTo(endX, cy - rY);
        ctx.bezierCurveTo(endX + 10, cy - rY / 2, endX - 20, cy + rY / 2, endX, cy + rY);
        ctx.stroke();

        // --- Draw the internal elements and labels ---

        // The plane S is the rectangular area between the central axis and the bottom surface.
        // Its top boundary is the central axis.
        ctx.beginPath();
        ctx.setLineDash([7, 5]);
        ctx.moveTo(cx, cy);
        ctx.lineTo(endX, cy);
        ctx.stroke();

        // Draw the wedge symbol on the left face, indicating the center.
        // Top dashed line of the wedge
        ctx.beginPath();
        ctx.setLineDash([4, 3]);
        ctx.moveTo(cx, cy);
        ctx.lineTo(cx - 28, cy - 12);
        ctx.stroke();

        // Bottom solid line of the wedge
        ctx.setLineDash([]);
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.lineTo(cx - 28, cy + 12);
        ctx.stroke();

        // Label the plane S with a bar over it
        ctx.fillStyle = 'black';
        ctx.font = 'italic 26px Times New Roman';
        const s_text = 'S';
        const s_x = cx + length / 2 - 20;
        const s_y = cy + rY / 2 + 5;
        ctx.fillText(s_text, s_x, s_y);
        
        // Draw the bar (macron) over 'S'
        const metrics = ctx.measureText(s_text);
        const barY = s_y - metrics.actualBoundingBoxAscent - 3;
        const barStartX = s_x;
        const barEndX = s_x + metrics.width;
        
        ctx.beginPath();
        ctx.moveTo(barStartX, barY);
        ctx.lineTo(barEndX, barY);
        ctx.lineWidth = 2.5; // Thicker bar
        ctx.stroke();
        
        // Reset line width for subsequent drawings
        ctx.lineWidth = 2;

        // Draw the caption text below the figure
        ctx.fillStyle = 'black';
        ctx.font = '26px "KaiTi", "SimSun"'; // Use common Chinese fonts
        const caption = '习题 8-23 图';
        const textMetrics = ctx.measureText(caption);
        ctx.fillText(caption, (canvas.width - textMetrics.width) / 2, canvas.height - 40);

    </script>
</body>
</html>